<template>
  <div class="app-container home">
    <el-row :gutter="75">
      <el-col
        :xs="24"
        :sm="12"
        :md="8"
        :lg="6"
        v-for="item in regionList"
        :key="item.id"
      >
        <div class="region-box">
          <div class="operate">
            <p class="box-name">
              <span>{{ item.grade }}</span>
              <span class="box-num">{{ item.num }}</span>
            </p>

            <p class="flex-between" style="align-items: flex-end">
              <el-icon
                style="color: #1daba6; font-size: 16px; margin-right: 5px"
                ><Edit
              /></el-icon>
              <el-icon
                style="color: #1daba6; font-size: 16px; margin-right: 5px"
                ><Bell
              /></el-icon>
              <el-icon style="color: #1daba6; font-size: 16px"
                ><Delete
              /></el-icon>
            </p>
          </div>
          <div class="flex-start" style="background:#fff">
            <div class="floor-box" v-for="floor in item.floor" :key="floor.name">
              {{floor.name}}
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script setup name="regionManagement">
const regionList = ref([
  {
    id: 1,
    grade: "普护区",
    num: 25,
    floor: [
      { name: "1号楼", show: true },
      { name: "2号楼", show: false },
    ],
    room: [
      { name: "101房", show: true },
      { name: "102房", show: false },
    ],
  },
  {
    id: 2,
    grade: "中护区",
    num: 12,
    floor: [{ name: "1号楼", show: true }],
    room: [
      { name: "101房", show: true },
      { name: "102房", show: false },
    ],
  },
]);
</script>

<style lang='scss' scoped>
.region-box {
  opacity: 1;
  border-radius: 10px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(29, 171, 166, 1);
  box-shadow: 0px 1px 2px rgba(29, 171, 166, 1);
  padding: 12px;
  min-height: 341px;
  .operate {
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(166, 166, 166, 1);
    display: flex;
    justify-content: space-between;
    margin-bottom: 24px;
  }
  p {
    margin: 0;
    padding: 0;
  }
  .flex-between {
    display: flex;
    justify-content: space-between;
  }
   .flex-start {
    display: flex;
    justify-content: flex-start;
  }
  .box-name {
    width: 98px;
    height: 32px;
    opacity: 1;
    border-radius: 10px 10px, 10px, 10px;
    background: #1daba6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 4px 4px 8px;
    font-size: 16px;
    color: #fff;
  }
  .box-num {
    width: 30px;
    height: 21px;
    opacity: 1;
    border-radius: 4px 4px, 4px, 2px;
    font-size: 12px;
    color: #000;
    background: #eef6f6;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2px 8px 2px 8px;
  }
  .floor-box {
    width: 60px;
    height: 24px;
    opacity: 1;
    border-radius: 60px 60px 60px 60px;
    background: #eef6f6;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 15px;
    font-size: 14px;
  }
}
</style>